<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="X-UA-Compatible" content='IE=edge' charset="utf-8" />
    <title>F4 Helper</title>
    <style>
        .floatLeft{
            float: left;
        }
    </style>
    <script type='text/JavaScript' src='../../../zbw_reporting/scripts/framework_include.js'></script>
    <script id='sap-ui-bootstrap' type='text/javascript'
            src='../../../ySAPUI5/SAPUI5/resources/sap-ui-core.js'
            data-sap-ui-theme='sap_goldreflection'
            data-sap-ui-libs='sap.ui.table'></script>
    <script>
        var BOI = parent.BOI; //REQUIRED
        var properties = { //REQUIRED
            checkboxItems: 10,
            variable: undefined,
            varname: undefined, //this overrides variable if set
            value: undefined,
            notify: false
        };
        window.onload = function() {
        }
        var checkedItems = new Array();
        var oCBs = new Array();

        var initialize = function initialize() {//REQUIRED //initialization function ... see below..
            /*---- begin your component custom initialization code ----*/
            BOI.Events.addListener(BOI.Events.varreset, function(args){
                if(properties.variable)
                {
                    properties.variable.value = properties.variable.defval;
                    properties.value = properties.variable.defval;
                }
                else
                {
                    properties.value = undefined;
                }

                //do your logic to clear component
                //check properties.value if it is undefined or if it is "" or whatever
                //and act accordingly to reset your component

                //SAMPLE RESET
                cycle = 1;
                load(cycle);
            });

            //example to set property values to dom elements
            refreshProperties();
        };
        var refresh = function refresh() { //REQUIRED function to be called by parent at anytime to refresh data.
        };
        var vname;
        var cycle = 1;
        var refreshProperties = function refreshProperties(){ //REQUIRED function to be called by parent when a property change occurs
            vname = properties.varname ? properties.varname : properties.variable ? properties.variable.name : undefined;
            if(vname)
            {
                load(cycle);
                var label = $('#bi_var_name');
                label.html(vname);
                if(properties.variable)
                {
                    label.attr('title', properties.variable.description);
                    $('#bi_desc').html(properties.variable.description);
                }
            }
        };

        function load(cycle)
        {
            BOI.loadF4Values(vname, cycle, properties.checkboxItems, function (data) {
                $('#content').html('');
                var values  = data.values;

                for (idx in values){
                    oCBs[idx] = new sap.ui.commons.CheckBox('item'+values[idx].name,{
                        text : values[idx].value,
                        tooltip : values[idx].name,
                        checked : false,
                        change : function() {
                            checkedItems = [];
                            for (cb in oCBs ){
                                if (oCBs[cb].getChecked())
                                    checkedItems.push(oCBs[cb].getTooltip());
                            }

                            properties.value = checkedItems;

                            if(properties.notify)
                                BOI.Events.raiseEvent(BOI.Events.varchange, [vname, checkedItems]);

                        }
                    }).placeAt('content');

                    if(values[idx] == properties.value)
                        oCBs[idx].setChecked(true);
                    new sap.ui.core.HTML({content:"<br/>"}).placeAt('content');
                }
            });
        }
        function prev()
        {
            if(cycle > 0) cycle--;
            load(cycle);
        }
        function next()
        {
            cycle++;
            load(cycle);
        }
    </script>

</head>
<body class='sapUiBody'>
<div id="bi_var_name"></div>
<p id="bi_desc"></p>
<div id='content'></div>
<a id="prev" onclick="prev()" href="#">Prev</a>
<a id="next" onclick="next()" href="#">Next</a>
</body>

</html>